<template>
	<div class="mainCom">
		<component
			v-for="(item, index) in TabbarList"
			:key="index"
			v-show="currentTab === item.key"
			:is="item.component"></component>
	</div>
	<van-tabbar v-model="currentTab">
		<van-tabbar-item v-for="(item, index) in TabbarList" :key="index" :name="item.key">
			<svg-icon
				v-if="currentTab === item.key"
				class="icon"
				:icon-class="item.active"
				color="#16c2a3"></svg-icon>
			<svg-icon v-else class="icon" :icon-class="item.active"></svg-icon>
			<p>{{ item.name }}</p>
		</van-tabbar-item>
	</van-tabbar>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import Home from './home/index.vue'
import Health from './health/index.vue'
import Message from './message/index.vue'
import Myself from './myself/index.vue'

const currentTab = ref<string>('home')

const TabbarList = [
	{
		name: '首页',
		key: 'home',
		active: 'home',
		component: Home
	},
	{
		name: '健康百科',
		key: 'book',
		active: 'book',
		component: Health
	},
	{
		name: '消息中心',
		key: 'message',
		active: 'message',
		component: Message
	},
	{
		name: '我的',
		key: 'myself',
		active: 'myself',
		component: Myself
	}
]
</script>
<style lang="scss">
.mainCom {
	width: 100vw;
	height: calc(100vh - 50px);
	overflow: hidden;
}

.icon {
	font-size: 20px;
}

.van-tabbar-item__text {
	text-align: center;

	p {
		margin: 5px 0;
	}
}
</style>
